<template>

	<view>
		<view>
			<uni-swiper-dot :info="info" :current="swiperDotIndex">
				<swiper autoplay :interval="2000" class="swiper-box" @change="change" style="height: 350rpx;"
					:current="swiperDotIndex">
					<swiper-item v-for="(item, index) in info" :key="index">
						<image style="width: 100%;height: 100%;" :src="item.url"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="padding-sm">
			<view class="radius  bg-white padding">
				<view style="display: flex;justify-content: space-between;">
					<view style="font-size: 32rpx;font-weight: bold;color: #333;">卡机名称阿斯顿发生发</view>
					<view>

					</view>
					<view style="">
						<uni-icons type="redo" size="20"></uni-icons>

					</view>
				</view>
				<view>
					<view style="font-size: 34rpx;color: red;font-weight: bold;">
						100元
					</view>
					<view style="color: #999;font-size: 30rpx;text-decoration:line-through">128元
					</view>
				</view>
				<view style="font-size: 24rpx;margin-top: 20rpx;color: #999">
					<text
						class="margin-left-xs ">距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222</text>
				</view>
				<view style="font-size: 24rpx;margin-top: 20rpx;color: #999;  flex-wrap: wrap;display: flex;">
					<text class="mendianTap" v-for="item in 6">{{item}}{{item}}{{item}}{{item}}</text>
				</view>
			</view>
			<uni-section type="line" title="门店公告" style="margin-top: 20rpx;" class="radius">
				<view class="padding-sm font-title" style="padding-top:0px;">
					禁止黄赌毒
				</view>
			</uni-section>

			<uni-section type="line" title="商品描述" style="margin-top: 20rpx;margin-bottom: 120rpx;" class="radius">
				<view class="padding-sm font-title" style="padding-top:0px;">
					距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222米距您222
				</view>
			</uni-section>


			<view style="width: 710rpx;position: fixed;bottom: 10px;">
				<button @click="addCommunication" class="login-btn cu-btn block bg-pink lg round ">
					确认购买
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperDotIndex: 0,
				info: [{
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
					},
					{
						url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
					}
				],
			}
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			selectStyle(index) {
				this.dotsStyles = this.dotStyle[index]
				this.styleIndex = index
			},
			selectMode(mode, index) {
				this.mode = mode
				this.modeIndex = index
				this.styleIndex = -1
				this.dotsStyles = this.dotStyle[0]
			},
			clickItem(e) {
				this.swiperDotIndex = e
			},
			onBanner(index) {
				console.log(22222, index);
			}
		}
	}
</script>

<style>
	.mendianTap {
		margin-top: 5rpx;
		padding: 1px 4px;
		border: solid #999 1px;
		margin-right: 10rpx;
		margin-top: 5rpx;
		border-radius: 5px;
	}
</style>